<template>
  <div class="video-play-back" :id="state.pid"></div>
</template>

<script setup>
import dayjs from "dayjs";
import { ElMessage } from "element-plus";
const emit = defineEmits(["capImg"]);
const props = defineProps({
  vid: String,
  Times: Array,
  url: "",
  capUrl: {
    type: Boolean,
    default: false,
  },
});
const state = reactive({
  pm: {},
  myPlugin: null,
  curIndex: 0,
  pid: "bk" + Math.floor(Math.random() * 1000) + 1,
});

const resize = () => {
  if (state.myPlugin) {
    setTimeout(() => {
      state.myPlugin.JS_Resize();
    }, 50);
  }
};

// 截图
const toCapImg = () => {
  state.myPlugin.JS_CapturePicture(
    state.curIndex,
    "smallImg",
    "JEPG",
    (imageData) => {
      // console.info("JS_CapturePicture success", imageData); //2.1.0开始全是base64，之前的版本存在blob或者是b
      // do you want...
      emit("capImg", imageData);
    }
  );
};

const play = async (bT, eT) => {
  if (!state.myPlugin) {
    await initPlayer();
    play();
    return;
  }
  let url = props.url || "";
  if (!url) return;
  if (url != "") {
    state.myPlugin.JS_Play(url, { playURL: url, mode: 1 }, 0).then(
      () => {
        resize();
        if (props.capUrl) {
          setTimeout(() => {
            toCapImg();
          }, 3000);
        }
      },
      (err) => {
        play();
      }
    );
  } else {
    ElMessage.error("未获取到播放地址");
  }
  // let bt =
  //   dayjs(new Date(props.Times[0]), "YYYY-MM-DDTHH:mm:ss") + ".000+08:00";
  // let et =
  //   dayjs(new Date(props.Times[1]), "YYYY-MM-DDTHH:mm:ss") + ".000+08:00";
  // let bt = dayjs(new Date(props.Times[0])).format("YYYY-MM-DDTHH:mm:ss.SSSZ");
  // let et = dayjs(new Date(props.Times[1])).format("YYYY-MM-DDTHH:mm:ss.SSSZ");
  // let pm = {
  //   cameraId: props.vid,
  //   beginTime: bt,
  //   endTime: et,
  //   uuid: "",
  // };
  // console.log(pm);
  //根据选择 获取监控点播放地址，尝试播放
  // useApi.post("/arhome/camera/getplaybackurls", pm).then((res) => {
  //   let url = res.data.url || "";
  //   if (url != "") {
  //     // state.myPlugin.JS_StopRealPlayAll();
  //     state.myPlugin.JS_Play(url, { playURL: url, mode: 1 }, 0, bt, et).then(
  //       () => {},
  //       (err) => {
  //         play();
  //       }
  //     );
  //   } else {
  //     ElMessage.error("未获取到播放地址");
  //   }
  // });
};
const initPlayer = () => {
  if (state.myPlugin != null) return;
  state.myPlugin = new JSPlugin({
    szId: state.pid, //需要英文字母开头，唯一性，必填
    szBasePath: "/js/", // 必填,与h5player.min.js的引用目录一致
    bSupporDoubleClickFull: true, //是否支持双击全屏，默认true
    // 分屏播放，默认最大分屏4*4
    iMaxSplit: 1,
    iCurrentSplit: 1,
  });

  state.myPlugin.JS_SetWindowControlCallback({
    windowEventSelect: function (index) {
      //插件选中窗口回调
      state.curIndex = index;
    },
    pluginErrorHandler: function (iWndIndex, iErrorCode, oError) {
      //插件错误回调
      console.error(`window-${iWndIndex}, errorCode: ${iErrorCode}`, oError);
      //ElMessage.error(`播放失败, 错误码: ${iErrorCode}`);
      play();
    },
    windowFullCcreenChange: function (bFull) {
      //全屏切换回调
      state.myPlugin.JS_Resize();
    },
  });
};
const seek = (bt) => {
  let et =
    dayjs(new Date(state.pm.endTime), "YYYY-MM-DDTHH:mm:ss") + ".000+08:00";
  play(bt, et);
  // if (state.myPlugin) {
  //   state.myPlugin.JS_Seek(state.curIndex, bt, et).then(
  //     () => {
  //       console.info("JS_Seek success");

  //     },
  //     (err) => {
  //       ElMessage.success("定位失败,错误码：" + err);
  //     }
  //   );
  // }
};
defineExpose({
  seek,
});
const destoryPlayer = () => {
  if (state.myPlugin) {
    state.myPlugin.JS_StopRealPlayAll();
    state.myPlugin.JS_DestroyWorker();
    state.myPlugin = null;
  }
};

watch(
  () => props.vid,
  (newval) => {
    if (newval != null && newval != "") {
      play();
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

watch(
  () => props.url,
  (newval) => {
    if (newval != null && newval != "") {
      play();
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

onMounted(() => {
  initPlayer();
});
//注销时 销毁组件
onBeforeUnmount(() => {
  destoryPlayer();
});
</script>

<style lang="scss" scoped>
.video-play-back {
  // width: 100%;
  // height: 100%;
  width: 200px !important;
  height: 100px !important;
  border: 1px solid yellow;
  &.bigbk {
    width: 400px !important;
    height: 400px !important;
  }
}
</style>